<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流</title>
  <style>
    #star {
      position: absolute
    }
  </style>
</head>
<body>
<img src="../image/star.gif" id="star">
</body>
<script>
  let star = document.getElementById('star')

  function move(event) {
    console.log(111)
    star.style.top = event.pageY - 50 + 'px'
    star.style.left = event.pageX - 50 + 'px'
  }

  star.onmousemove = throttle(move, 10)

  // 节流 与防抖不同 节流按照一定的频率触发事件
  function throttle(fun, delay) {
    let flag = true
    return function () {
      let args = arguments
      let that = this
      if (flag) {
        flag = false
        setTimeout(()=>{
          flag = true
          fun.apply(that, args)
        }, delay)
      }
    }
  }


</script>
</html>
